<template>
  <div class="my">
    <header>
      <div class="my-img">
        <img :src="avatar" alt="" >
      </div>
      <div class="my-name">
        <div>{{userMsg.nickName}}</div>
        <p><input type="text" placeholder="请输入您的个性签名"></p>
      </div>
    </header>
    <div class="my-order">
      <van-cell title="我的订单" is-link value="查看全部" @click="toOrder('a')"/>
      <van-grid :column-num="5" :border="false">
        <van-grid-item  @click="toOrder('a')">
          <i class="iconfont icon-daifukuan01"></i>
          <span>待付款</span>
        </van-grid-item>
        <van-grid-item  @click="toOrder('b')">
          <i class="iconfont icon-dingdan-daifukuan"></i>
          <span>待发货</span>
        </van-grid-item>
        <van-grid-item  @click="toOrder('c')">
          <i class="iconfont icon--_peisongshang"></i>
          <span>待收货</span>
        </van-grid-item>
        <van-grid-item  @click="toOrder('d')">
          <i class="iconfont icon-comment-w"></i>
          <span>待评价</span>
        </van-grid-item>
        <van-grid-item @click="toOrder('e')">
          <i class="iconfont icon-servicewuyoutuihuanhuo"></i>
          <span>退款售后</span>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="my-other setting">
      <van-grid :column-num="5" :border="false">
        <van-grid-item class="iconfont icon-youhuijuan1" text="优惠券" />
        <van-grid-item class="iconfont icon-icon-2" text="收货地址" @click="$router.push('/area')"/>
        <van-grid-item class="iconfont icon-liulanjilu1" text="足迹" />
        <van-grid-item class="iconfont icon-kefu3" text="官方客服" />
        <van-grid-item class="iconfont icon-shezhi" text="设置"  @click="$router.push('/setMsg')"/>
      </van-grid>
    </div>
    <div class="my-exit" @click="exit">退出登录</div>
  </div>
</template>
<script>
import Vue from 'vue'
import { getUser } from '@/api/request.js'
import { Cell, CellGroup, Grid, GridItem } from 'vant'
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Grid)
Vue.use(GridItem)
export default {
  data () {
    return {
      userMsg: []
    }
  },
  methods: {
    toOrder (i) {
      sessionStorage.setItem('order', i)
      this.$router.push('order')
    },
    exit () {
      sessionStorage.setItem('token', '')
      sessionStorage.setItem('userId', '')
      sessionStorage.setItem('isLogin', '')
      this.$router.push('/home')
    }
  },
  mounted () {
    getUser({
      userId: sessionStorage.getItem('userId')
    }).then(data => {
      this.userMsg = data.data.msg[0]
    })
  },
  computed: {
    avatar () {
      return this.userMsg.avatar ? this.userMsg.avatar : 'https://img02.hua.com/pc/assets/img/avatar_default_06.jpg'
    }
  }
}
</script>
<style lang="scss">
.my{
  background: #efefef;
  header{
    background: #fff;
    height: 1.3rem;
    display: flex;
    .my-img{
      display: flex;
      align-items: center;
      padding-left: .3rem;
      img{
        width: .85rem;
        height:.85rem;
        border: 2px solid #c8c9cc;
        border-radius: 50%;
      }
    }
    .my-name{
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: .35rem;
      div{
        padding-bottom: 0.1rem;
      }
      input{
        border:none
      }
    }
  }
  .my-order{
    margin-top: 0.2rem;
    .van-grid{
      .van-grid-item{
        .iconfont{
          font-size: 26px;
          display: inline-block;
          margin-bottom: 0.1rem;
        }
        span{
          color: #646566;
          font-size: 12px;
        }
      }
    }
    .van-cell{
      padding: 12px 16px;
    }
    .van-cell__title{
      font-weight: 600;
    }
    .van-grid{
      .iconfont{
        .van-grid-item__content{
          height: 43px;
          padding: 19px 8px;
        }
        font-size: 26px;
        text-align: center;
        background: #ffff;
        padding: 15px 0 0 0;
        display: inline-block;
      }
    }
  }
  .setting{
    .van-grid{
      .iconfont{
        .van-grid-item__content{
          height: 0.12vw;
        }
        padding: 2vw 0 0 0;
        font-size: 26px;
        text-align: center;
        background: #ffff;
      }
    }
  }
  .my-other{
    margin-top: 0.2rem;
  }
  .my-exit{
    background: #fff;
    height: 0.6rem;
    line-height: 0.6rem;
    margin-top: 0.3rem;
    text-align: center;
  }
}
</style>
